<script setup>

import {computed, reactive, ref} from "vue";
import Engine from "./Engine.vue";

//定义引用对象
const engineData = reactive({
  brand: "奔驰",
  power: 200,
  speed: 0,
  petrol: 0
})
//计算总价
const totalPrice = computed(() => {
  return (engineData.power * 100) / 2
})
</script>

<template>
  <div>
    <h2>逐个引用</h2>
    <!--  逐个引用-->
    <Engine :brand="engineData.brand" :power="engineData.power" @start="(data)=>{
      engineData.speed = data.speed
      engineData.petrol = data.petrol
    }"/>
  </div>
  <br>
  <div>
    <h2>批量引用</h2>
    <!--  批量引用，通过对象属性映射-->
    <Engine v-bind="engineData" @start="(data)=>{
      engineData.speed = data.speed
      engineData.petrol = data.petrol
    }"/>
  </div>
  <br>
  <div>
    <h4>速度：{{ engineData.speed }}； 油量：{{ engineData.petrol }}</h4>
    <h3>总价：{{ totalPrice }}</h3>
  </div>

</template>

<style scoped>

</style>